<template>
	<view class="address-edit">
		<view class="content">
			<!-- 输入框组 -->
			<van-cell-group>
				<van-field :value="formInput.name" @change="handleValue('name', $event)" label="联系人" placeholder="姓名" clearable />

				<van-field :value="formInput.phone" @change="handleValue('phone', $event)" type="number" label="电话" placeholder="手机号码" clearable />
			<div @click="show">
				<van-field :value="valueArea" @change="handleValue('phone', $event)" type="number" label="地区" placeholder="选择服务地址" readonly required clickable />
			</div>
				<van-cell class="default" title="设为默认收货地址"><switch :checked="formInput.fault" @change="switchChange"/></van-cell>
			</van-cell-group>

			<van-button :loading="state.loading" color="red" round block @click="saveAddress">保存</van-button>
			<van-button round block  @click="onDelete">删除</van-button>
		</view>
		<van-popup modle="region" :value="region" :show="showArea" position="bottom" style="height: 40%; z-index: 9999;}">
		      <van-area :area-list="areaList"  @confirm="regionChange"  @cancel="bindCancel" />
		</van-popup>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { areaList } from '@vant/area-data';
import { addAddress, EditAddress, getAddressList, DeleteAddress} from '../../api/modules/address1'
const state = reactive({ 
	loading: false,
	showArea:false,
	arrArea:[],
	valueArea:'',
	formInput: {
		name: '',
		phone: '',
		province: '',
		city: '',
		district: '',
		fault: 0
	}, 
	region: [],
	id: ''
})

const init = async () => {
	uni.showLoading({ title: '加载中...', mask: true })
	if(state.id.length == 15) return uni.hideLoading()
	const a = {
		ressid:''
	}
	a.ressid = state.id
	const data  = await getAddressList(a)
	console.log(data[0]);
	state.formInput = data[0]
	state.valueArea = data[0].province + '-' +  data[0].city + '-' + data[0].district
	uni.hideLoading()
}
// 输入框双向绑定
const handleValue = (key, e) => {
	const value = e.detail
	if(key == "name") {
		state.formInput.name = value
	}else if (key == "phone") {
		state.formInput.phone = value
	}
}

const switchChange = (e) => {
	state.formInput.fault = e.detail.value - 0
}

const show = () =>{
	state.showArea = true
}

const regionChange = (val) => {
	state.showArea = false
	state.arrArea = val;
	var addrInfo = val.detail.values[0].name + '-' + val.detail.values[1].name + '-' + val.detail.values[2].name;
	state.valueArea = addrInfo
	state.formInput.province = addrInfo.split('-')[0]
	state.formInput.city = addrInfo.split('-')[1]
	state.formInput.district = addrInfo.split('-')[2]
	console.log(state);
}
// 添加与修改
const saveAddress = async () => {
	const { name, phone, province, city, district } = state.formInput
	if (!name.trim().length) return uni.showToast({ title:'姓名不能为空', icon:'none'})
	if (!/1[3456789]\d{9}/.test(phone)) return uni.showToast({ title:'请填写正确的手机号码', icon:'none'})
	if (!state.valueArea.length) return uni.showToast({ title:'请选择省市区', icon:'none'})
	state.loading = true
	try{
		console.log(state.formInput.ressid);
		if(state.formInput.ressid) {
			await EditAddress(state.formInput) 
		}else {
			await addAddress(state.formInput)
		}
		uni.showToast({title: '操作成功',icon:'none'})
		state.loading = false
		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	}catch(e){
		state.loading = false
	}
	// console.log(name, phone, province, city , district );
}
// 删除
const onDelete = async () => {
	const a = {
		ressid:''
	}
	a.ressid = state.id
	await DeleteAddress(a)
	uni.showToast({title: '删除成功',icon:'none'})
	setTimeout(() => {
		uni.navigateBack()
	}, 500)
}
// 页面加载
onLoad((options) => {
	state.id = options.id
	uni.setNavigationBarTitle({ title: state.id.length == 15 ? '新增地址' : '修改地址'})
	if (state.id) {
		init()
	}
})

// 页面显示
onShow(() => {
	init()
})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { formInput, id, showArea,valueArea, region } = toRefs(state)
</script>

<style lang="scss">
.content {
	padding: 24rpx;
	.van-cell__title {
		max-width: 180rpx !important;
		color: #646566;
		margin-right: 24rpx;
	}
	.default .van-cell__title {
		max-width: 100% !important;
	}
	.city {
		color: #ccc;
		text-align: left;
	}
	.city2 {
		color: #000;
		text-align: left;
	}
	switch {
		transform: scale(0.8);
	}
	.van-button {
		margin-top: 36rpx;
	}
}
</style>
